<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>角色管理</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script>document.write('<script src="../../plugin/vue/js/import.js?' + Math.random() + '"><' + '/script>');</script>

<script>
	_import("../../plugin/vue/js/before.js");
</script>

<style type="text/css">
[v-cloak]{
	display:none !important;
}
html,body {
	overflow: hidden;
}
</style>
</head>
<body>
	<div class="container w-wdauto" id="app" v-cloak> 
		<div class="panel panel-default">
			<div class="panel-heading" id="panel-heading-div">
				<h3 class="panel-title">
					<i class="icon-puzzle-piece"></i>角色管理
				</h3>
			</div>
			<el-dialog title="添加角色" :visible.sync="addRole" class="w-dialogpd" width="600px">
				<div class="form-group w-form-inline">
				 <label>角色名称：</label> 
				 <el-input v-model="roleName" autocomplete="off"></el-input>
			 	</div>
			 	<el-alert v-if='add_warn' title="角色名称不能为空" type="error" show-icon>
				</el-alert>
			 	<div slot="footer" class="dialog-footer">
			    	<el-button @click="cancel">取 消</el-button>
			    	<el-button type="primary" @click="add">确 定</el-button>
			    </div>
			</el-dialog>
			<div class="panel-body w-pt10 w-jheight ">
				<el-button type="primary" id="addbtn" @click="addRole=true;roleName='';add_warn=false;" class="pull-right w-mb5" >添加</el-button>
				<el-table :data="roleTable" border style="width: 100%">
	    			<el-table-column prop="role_name" label="角色名称">
	    			</el-table-column>  			
	    			<el-table-column  label="操作"> 
	    				<template slot-scope="scope"> 
	    					<i class="el-icon-edit"  title="编辑"  @click="edit(scope.$index,scope.row)"></i>
	    					<i class="el-icon-delete" title="删除"  @click="del(scope.$index,scope.row)"></i>
	    				</template>
	   				</el-table-column>
	   				
	  			</el-table>
  			</div>
  			<el-dialog title="角色权限编辑" :visible.sync="editForm" class="w-dialogpd" >
  			  <div class="form-group w-form-inline">
				 <label>角色名称：</label> 
				 <el-input v-model="roleName" autocomplete="off"></el-input>
			 </div>
			 <el-alert v-if='edit_warn' title="角色名称不能为空" type="error" show-icon>
			 </el-alert>
			  <el-table :data="roleInfo" border style="width: 100%" class="w-tableinput mt10">
			  	<el-table-column prop="privGroup" label="功能组" width="110">
    			</el-table-column>
    			
    			<el-table-column  label="权限" class="w-tableinput">
    				<template slot-scope="scope"> 
    					<el-checkbox-group v-model='privList'>
    						<el-checkbox v-for='item in roleInfo[scope.$index].rolePrivList' :label='item.privCode'>
    							{{item.privRemarks}}
    						</el-checkbox>
    					</el-checkbox-group>
    				</template>
    			</el-table-column>    			
			  </el-table>
			  
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="cancel">取 消</el-button>
			    <el-button type="primary" @click="save">确 定</el-button>
			  </div>
			</el-dialog>
  			
		</div>
	</div>
	
</body>
<script>
	_import("../../plugin/vue/js/after.js");
	//_import("../../plugin/js/user.js");
</script>
<script>
	_import("js/role.js");
	//height
	var wHight = $(window).height()-50;
	var bHight = wHight + "px";
	$(".w-jheight").css("height",bHight);
</script>
</html>